<template>
  <view :class="['early-warning', { on: btnnum == 1 }]">
    <view class="list-wrap">
      <view class="tab-title rbox box_y_center">
        <view
          v-for="(item, index) in tabs"
          :key="index"
          :class="['name', { btna: count == index }]"
          @tap="change(index)"
        >
          {{ item }}
        </view>
      </view>
      <view class="tab-cont" :class="{ dis: btnnum == 0 }">
        <view class="collapse-wrap">
          <view
            v-for="(item, index) in list"
            :key="index"
            class="h-collapse cbox"
          >
            <view
              @click="changeContent(index)"
              class="head rbox box_y_center box_space_b"
            >
              <text class="tit">{{ item.title }}</text>
              <view
                class="iconfont icon-arrow-right"
                :class="{ active: item.showContent }"
              >
              </view>
            </view>
            <view class="collapse-box" v-show="item.showContent">
              霜霉病指的是由真菌中的霜霉菌引起的植物病
              害。霜霉菌是专性寄生菌，极少数的霜霉菌已
              可人工培养，如引起谷子白发病的禾生指梗霉
              引起白菜霜霉病的寄生霜霉霜霉菌是专性寄生
              菌，极少数的霜霉菌已可人工培养，如引起谷
              子白发病的禾生指梗霉、引起白菜霜霉病
            </view>
          </view>
        </view>
      </view>
      <view class="tab-cont" :class="{ dis: btnnum == 1 }">
        <view class="feedback-wrap">
          <input
            type="text"
            class="tit"
            placeholder="请输入您反馈的标题(50字以内)"
          />
          <view class="info-wrap">
            <view class="info rbox">
              <textarea
                class="msg"
                placeholder="请输入您的反馈信息"
                cols="30"
                rows="10"
                v-model="desc"
                @input="descInput"
              />
              <text class="limit rbox box_self_end">{{ countNum }}/500</text>
            </view>
            <van-uploader :file-list="fileList" :after-read="afterRead">
              <view class="iconfont icon-add rbox box_center"></view>
            </van-uploader>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { vanUploader } from "../../wxcomponents/vant/uploader/index.js"
export default {
  data() {
    return {
      btnnum: 0,
      count: "",
      tabs: ["常见问题", "信息反馈"],
      activeNames: ['1'],
      list: [
        { title: '什么是霜霉病？', showContent: false },
        { title: '什么是霜霉病？', showContent: false }
      ],
      countNum: 0,
      desc: '',
      fileList: []
    }
  },
  components: {
    vanUploader
  },
  methods: {
    change(e) {
      this.count = e
      this.btnnum = e
      console.log(this.count)
    },
    changeContent(index) {
      this.list[index].showContent = !this.list[index].showContent;
    },
    descInput() {
      if (this.desc.length > 500) {
        this.desc = this.desc.slice(0, 500)
        wx.showToast({
          title: '字数不能超过500',
          icon: 'none'
        })
      }
      this.countNum = this.desc.length
    },
    afterRead(event) {
      console, log('file', file, event)
      const { file } = event.detail;
      // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
      wx.uploadFile({
        url: 'https://example.weixin.qq.com/upload', // 仅为示例，非真实的接口地址
        filePath: file.url,
        name: 'file',
        formData: { user: 'test' },
        success(res) {
          // 上传完成需要更新 fileList
          const { fileList = [] } = this.data;
          fileList.push({ ...file, url: res.data });
          this.setData({ fileList });
        },
      });
    },

  }
}
</script>

<style lang="scss" scoped>
.early-warning {
  &.on {
    background-color: #f7f7f7;
    min-height: 100vh;
  }
  .list-wrap {
    margin-top: 4rpx;
    .tab-title {
      padding: 15rpx 42rpx;
      background-color: #f7f7f7;
      .name {
        position: relative;
        font-size: 28rpx;
        color: #333;
        &:not(:first-child) {
          margin-left: 60rpx;
        }
        &.btna {
          color: #1de1c3;
          &::after {
            position: absolute;
            bottom: -15rpx;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            width: 80rpx;
            height: 6rpx;
            background: #1de1c3;
          }
        }
      }
    }
    .tab-cont {
      padding: 0 42rpx;
      display: none;
      &.dis {
        display: block;
      }
    }
  }
  .collapse-wrap {
    padding: 0 30rpx;
    margin-top: 30rpx;
    min-height: 840rpx;
    background-color: #f7f7f7;
    border-radius: 20rpx;
    .h-collapse {
      border-bottom: 1rpx solid #fff;
      .head {
        padding: 30rpx 0;
        .tit {
          font-size: 28rpx;
          line-height: 1;
          color: #474747;
        }
        .iconfont {
          font-size: 24rpx;
          color: #b4b4b4;
          transition: all 0.3s ease;
          &.active {
            transform: rotate(90deg);
          }
        }
      }
      .collapse-box {
        padding: 20rpx 14rpx 30rpx;
        font-size: 28rpx;
        line-height: 1.5;
        letter-spacing: 0.4px;
        color: #9e9e9e;
        transition: all 0.3s ease;
      }
    }
  }
  .feedback-wrap {
    margin-top: 28rpx;
    .tit {
      padding: 20rpx 30rpx;
      font-size: 28rpx;
      height: auto;
      min-height: auto;
      background-color: #fff;
      border-radius: 16px 16px 0px 0px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
    }
    .info-wrap {
      margin-top: 6rpx;
      padding: 16rpx 30rpx 20rpx;
      background-color: #fff;
      border-radius: 0px 0px 20px 20px;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
      .info {
        .msg {
        }
        .limit {
          font-size: 28rpx;
          line-height: 1;
          color: #9e9e9e;
        }
      }
    }
    .icon-add {
      width: 134rpx;
      height: 134rpx;
      font-size: 58rpx;
      color: #b4b4b4;
      background: #f7f7f7;
      border-radius: 10rpx;
    }
  }
}
</style>
